<template>
  <div class="container">
    <h2>我的历史记录</h2>
    <template  v-for="(item,k) in hists" :key="k" >
    <div class="d-flex mb-1 me-0 ms-0 mt-3"  @click="playVideo(item.video.videoid,true)" v-if="item.video!=null">
        <div class="flex-shrink-0" >
          <img :src="prefix2+'/p'+item.video.cover_pic+'.jpg'" alt="..." width="170" height="100"/>
          </div>
          <div class="flex-grow-1 ms-3">
            <h5 class="mt-0 mb-1 ">{{ item.video.title }}</h5>
            <p class="position-relative text-muted">{{ item.video.info }}<button class="position-absolute btn btn-outline-dark end-0" @click.stop="request.get('user/deleteH',{videoIds:item.video.videoid}).then(re=>{if (re)hists.splice(k,1)})">删除记录</button>
            </p>
            <div class="text-end">{{item.time}}</div>
<!--            <div class="text-end">{{item.time.split('T')[0]+' '+item.time.split('T')[1].split('.')[0]}}</div>-->
          </div>
    </div>
      <div class="d-flex mb-1 me-0 ms-0 mt-3" v-else>
        <div class="flex-shrink-0" >
          <img src="../assets/invalid.jpeg" alt="..." width="170" height="100"/>
        </div>
        <div class="flex-grow-1 ms-3">
          <h5 class="mt-0 mb-1 text-muted">视频失效了</h5>
          <p class="position-relative"><button class="position-absolute btn btn-outline-dark end-0" @click.stop="request.get('user/deleteH',{videoIds:item.video_id}).then(re=>{if (re)hists.splice(k,1)})">删除记录</button>
            <br></p>
          <div class="text-end">{{item.time}}</div>
          <!--            <div class="text-end">{{item.time.split('T')[0]+' '+item.time.split('T')[1].split('.')[0]}}</div>-->
        </div>
      </div>
    </template>

  <div aria-label="Page navigation example">
      <ul class="pagination justify-content-end" >
        <li class="page-item">
          <a class="page-link">共{{page.pages}}页</a>
        </li>
        <li :class="'page-item'+(page.isFirstPage?' disabled':null)"><a class="page-link" @click="pageIndex--">上一页</a></li>
        <li v-for="i in page.navigatepageNums"
            :key="i" :class="'page-item'+(page.pageNum==i?' active':null)">
          <a class="page-link" @click="pageIndex=i">{{ i }}</a>
        </li>
        <li :class="'page-item'+(page.isLastPage?' disabled':null)"><a class="page-link" @click="pageIndex++">下一页</a></li>
      </ul>
    </div>
  </div>

</template>

<script setup lang="ts">
import {computed, inject, ref, watch} from "vue";
import request from "@/hooks/request";
import {Fav, Favorite, hist, Hist, pageInfo, PageInfo, VideoState} from "@/types/AllData";
const prefix2=inject('prefix2')
const playVideo=inject('playVideo')
const aComponent = inject('aComponent')
const changeComponent = inject('changeComponent')
// const hists=ref([hist])
const page=ref<PageInfo<Hist>>(pageInfo)
const pageIndex=ref(1)

const get=()=>{
  request.get('user/getHistory/'+pageIndex.value).then(re=>{
    page.value=re
    page.value.list.forEach(h=>{
      let d=new Date(h.time)
      h.time=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()
    })
  })
}
get()
watch(pageIndex,get)
const hists=computed(()=>page.value.list)
    /*.then(()=>{
  hists.value.forEach((f)=>{
    request.get('video/play/'+f.video_id).then(rep=>{
      f.video=rep
    })
  })
})*/
</script>

<style scoped>

</style>